<template>
    <li>
        <div class="select">
            <input
                type="checkbox"
                :checked="good.select"
                @click="good.select = !good.select"
            />
        </div>
        <div class="pic">
            <img :src="good.pic" alt="" />
        </div>
        <div class="name">{{ good.name }}</div>
        <div class="price">
            ￥ <span>{{ good.price }}</span>
        </div>
        <div class="number">
            <!-- 处理边界 -->
            <button :disabled="good.buy_num <= 0" @click="good.buy_num--">
                -
            </button>
            <input type="text" v-model="good.buy_num" />
            <button
                :disabled="good.buy_num >= good.number"
                @click="good.buy_num++"
            >
                +
            </button>
        </div>
        <div class="subtotal">
            ￥ <span>{{ good.price * good.buy_num }}</span>
        </div>
        <div class="del">
            <button @click="delOneGood(good.id)">删除</button>
        </div>
    </li>
</template>

<script>
import { mapMutations } from "vuex";

export default {
    name: "CartItem",
    props: ["good"],
    methods: {
        ...mapMutations(["delOneGood"]),
    },
};
</script>

<style>
li {
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #333;
    box-sizing: border-box;
    margin: 10px 0;
    border-radius: 10px;
}
li > div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 20px;
}
li > div > span {
    color: red;
}
li > div:first-child > input {
    width: 20px;
    height: 20px;
}
li > div > button {
    font-size: 20px;
    padding: 5px 10px;
    cursor: pointer;
}
li > div.del > button {
    background-color: red;
    color: #fff;
}
li > div.number > input {
    width: 50px;
    height: 24px;
    font-size: 20px;
    text-align: center;
}
.select,
.pic,
.del {
    width: 100px;
}

.name,
.price,
.subtotal {
    width: 200px;
}

.number {
    width: 300px;
}
</style>
